<%--
  Created by IntelliJ IDEA.
  User: 全谢民
  Date: 2023/9/30
  原版文件
  Time: 12:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>智能购票分类</title>
    <script type="text/javascript" rel="script" src="../js/jquery-3.6.4.js"></script>
    <link href="../css/user_page_css/home_page.css" rel="stylesheet" type="text/css">
    <link href="../css/user_page_css/search.css" rel="stylesheet" type="text/css">
    <style>
        /*分界线*/
        .sidebar .item:nth-last-child(2){
            /*display: none;*/
        }
        .dm-header-banner {
            width: 100%;
            height: 75px;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url('../images/user_page_images/tool/red.jpg');
        }
        .sidebar{top: 72.5%;}
        .sidebar .item .icon {
            background-image: url('../images/user_page_images/tool/side.png');
        }
        img{border: 0;}
        .sidebar .item .qrcode{
            background: #fff url('../images/user_page_images/tool/code.png') no-repeat center center;
            background-size: 90%;
        }
        .sidebar .item .qrcode img{display:none;}
    </style>
</head>
<body>
<%--头部--%>
<%--<jsp:include page="header.jsp"></jsp:include>--%>
<a href="javascript:;" onmousedown="if(document.getElementById('mydiv').style.display == 'block')
{ document.getElementById('mydiv').style.display = 'none'; }
else{ document.getElementById('mydiv').style.display = 'block'; }"><span id="myspan" class="die2">aaa</span></a>
<div id="mydiv" style="display: block">aaaaaaaaaaaaaaaaaaaaaa</div>
<div class="search-box">
            <%--            排序--%>
            <%--            选中改变class--%>
            <div class="search-sort search-main-sort">
                <div class="search-sort_fl">
                    <span class="search-sort-item search-sort-item-active" onclick="xianShi(this)" )>相关度排序</span>
                    <span class="search-sort-item" onclick="xianShi(this)">推荐排序</span>
                    <span class="search-sort-item" onclick="xianShi(this)">最近开场</span>
                    <span class="search-sort-item" onclick="xianShi(this)">最新上架</span>
                </div>
                <div class="pagination-top search-sort_fr">
                    <a href="#" class="sort__prev sort__prev_gray"></a>
                    <div class="sort__num">
                        <span>1</span>/<span>20</span>
                    </div>
                    <a href="#" class="sort__next"></a>
                </div>
            </div>
            <%--            主要内容--%>
            <div class="search__itemlist">
                <div class="item__main">
                    <div class="item__box">
                        <div class="items">
                            <a href="#" class="items__img">
                                <span class="items__img__tag">演唱会</span><img width="153px" height="206px" src="../images/user_page_images/typeImages/sports/fly1.jpg"></a>
                            <div class="items__txt">
                                <div class="items__txt__title">
                                    <span>太原</span>
                                    <a href="#">2023爱玛·追星半糖音乐节-太原站</a>
                                </div>
                                <div class="items__txt__time">艺人：凤凰传奇、老狼、张远、超级市场、钢心、春日玫瑰、老K蛋乐队、声无哀乐</div>
                                <div class="items__txt__time">
                                    <a class="items__txt__venue__icon"></a>
                                    太原 | 山西潇河国际会展中心室外展场
                                </div>
                                <div class="items__txt__time">
                                    <a class="items__txt__time__icon"></a>
                                    2023.10.14-10.15
                                </div>
                                <div class="items__txt__tags"></div>
                                <div class="items__txt__price">
                                    <span>199-429<i>元</i></span>售票中
                                </div>
                            </div>
                        </div>
                        <div class="items">
                            <a href="#" class="items__img">
                                <span class="items__img__tag">演唱会</span><img width="153px" height="206px" src="../images/user_page_images/typeImages/sports/fly1.jpg"></a>
                            <div class="items__txt">
                                <div class="items__txt__title">
                                    <span>太原</span>
                                    <a href="#">2023爱玛·追星半糖音乐节-太原站</a>
                                </div>
                                <div class="items__txt__time">艺人：凤凰传奇、老狼、张远、超级市场、钢心、春日玫瑰、老K蛋乐队、声无哀乐</div>
                                <div class="items__txt__time">
                                    <a class="items__txt__venue__icon"></a>
                                    太原 | 山西潇河国际会展中心室外展场
                                </div>
                                <div class="items__txt__time">
                                    <a class="items__txt__time__icon"></a>
                                    2023.10.14-10.15
                                </div>
                                <div class="items__txt__tags"></div>
                                <div class="items__txt__price">
                                    <span>199-429<i>元</i></span>售票中
                                </div>
                            </div>
                        </div>
                        <div class="items">
                            <a href="#" class="items__img">
                                <span class="items__img__tag">演唱会</span><img width="153px" height="206px" src="../images/user_page_images/typeImages/sports/fly1.jpg"></a>
                            <div class="items__txt">
                                <div class="items__txt__title">
                                    <span>太原</span>
                                    <a href="#">2023爱玛·追星半糖音乐节-太原站</a>
                                </div>
                                <div class="items__txt__time">艺人：凤凰传奇、老狼、张远、超级市场、钢心、春日玫瑰、老K蛋乐队、声无哀乐</div>
                                <div class="items__txt__time">
                                    <a class="items__txt__venue__icon"></a>
                                    太原 | 山西潇河国际会展中心室外展场
                                </div>
                                <div class="items__txt__time">
                                    <a class="items__txt__time__icon"></a>
                                    2023.10.14-10.15
                                </div>
                                <div class="items__txt__tags"></div>
                                <div class="items__txt__price">
                                    <span>199-429<i>元</i></span>售票中
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <%--                底部的页码--%>
                <div class="pagination">
                    <div class="el-pagination is-background">
                        <button type="button" disabled="disabled"class="btn-prev">
                            <i class="el-icon el-icon-arrow-left"></i>
                        </button>
                        <ul class="el-pager">
                            <c:forEach var="i" varStatus="status" begin="1" end="20">
                                <li
                                        <c:if test="${status=1}">class="number active"</c:if>
                                        <c:if test="${status!=1}">class="number"</c:if>
                             >${i}</li>
                            </c:forEach>
                            <%--<li class="number active">1</li>
                            <li class="number">2</li>
                            <li class="number">3</li>
                            <li class="number">4</li>
                            <li class="number">5</li>
                            <li class="number">6</li>
                            <li class="number">7</li>
                            <li class="el-icon more btn-quicknext el-icon-more"></li>
                            <li class="number">100</li>--%>
                        </ul>
                        <button type="button" class="btn-next">
                            <i class="el-icon el-icon-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--底部--%>
<%--<jsp:include page="footer.jsp"></jsp:include>--%>
<script type="text/javascript">
    /*function xianShi(a){
        let className=$(a).attr("class");
        if (className == 'search-sort-item'){
            $(".search-sort-item-active").attr("class","search-sort-item");
            $(a).attr("class","search-sort-item search-sort-item-active");
        }
    }*/
   /* $(".search-sort-item").=function (){
        alert(123);
        if(document.getElementById('mydiv').style.display == 'block'){ document.getElementById('mydiv').style.display = 'none'; }
        else{ document.getElementById('mydiv').style.display = 'block'; }
    }*/

</script>

</body>
</html>
